<template>
    <div>
        <a-modal v-model:visible="visible" :title="isView?'查看':(fromState.id?'编辑':'新增')" :width="980" :dialog-style="{top:'20px'}">
            <div v-if="visible" :key="accountManageKey" style="height: calc(100vh - 230px);overflow-y: auto;">
                <a-form layout="inline" class="account-manage-form" :form="form">
                    <a-form-item label="身份证号" class="flex-p-t">
                        <a-input
                            v-if="!isView"
                            placeholder="请输入身份证号" 
                            v-model:value="fromState.fsfzh" 
                            v-decorator="['fsfzh', { initialValue:fromState.fsfzh, rules: rules.fsfzh}]"
                        />
                        <span v-else>{{ fromState.fsfzh }}</span>
                    </a-form-item>
                    <a-form-item label="手机号码" class="flex-p-t">
                        <a-input
                        v-if="!isView"
                        placeholder="请输入手机号码" 
                        v-model:value="fromState.phone"
                        v-decorator="['phone', { initialValue:fromState.phone, rules: rules.phone}]"
                        />
                        <span v-else>{{ fromState.phone }}</span>
                    </a-form-item>
                    <a-form-item label="姓名" class="flex-p-t">
                        <a-input
                        v-if="!isView"
                         placeholder="请输入姓名" 
                         v-model:value="fromState.realname"
                         v-decorator="['realname', { initialValue:fromState.realname, rules: rules.realname}]"
                         />
                         <span v-else>{{ fromState.realname }}</span>
                    </a-form-item>
                    <br/>
                    <a-form-item label="审评类型"  class="flex-no-h">
                        <div style="margin-left: 20px;">
                            <a-checkbox-group
                            v-if="checkboxShow"
                            :key="categoryKey"
                            :disabled="isView"
                            v-model:value="category" 
                            @change="categoryChange"
                            name="checkboxgroup"
                            v-decorator="['category', { initialValue:category, rules: rules.category}]"
                            >
                                <div v-for="(item,index) in lbList" :key="index">
                                    <a-checkbox :value="item.lbmc" >{{item.lbmc}}</a-checkbox>
                                    <div style="display: flex;align-items: center;">
                                        <a-form-item label="所属库" class="flex-p-t">
                                            <a-radio-group
                                                v-if="item.fxzzt == '0'"
                                                v-model:value="item.fssk" 
                                                disabled
                                            >
                                                <a-radio v-for="(trem,tIndex) in sskList" :key="tIndex" :value="trem.itemValue">{{ trem.itemText }}</a-radio>
                                            </a-radio-group>
                                            
                                            <a-radio-group
                                                v-else
                                                :disabled="isView"
                                                :key="radioGroupKey"
                                                v-model:value="item.fssk" 
                                                v-decorator="['fssk'+item.forder, { initialValue:item.fssk, rules: rules['fssk'+item.forder]}]"
                                            >
                                                <a-radio v-for="(trem,tIndex) in sskList" :key="tIndex" :value="trem.itemValue">{{ trem.itemText }}</a-radio>
                                            </a-radio-group>
                                        </a-form-item>
                                    </div>
                                </div>
                            </a-checkbox-group>
                        </div>
                    </a-form-item>
                </a-form>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="visible = false" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="!isView" class="blue-btn" @click="handleOk(true)" style="margin-right: 10px;">保存</a-button>
                    <a-button v-if="!isView" class="blue-btn" @click="handleOk(false)" type="primary">保存并关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import validator from '@/common/validator'
import { 
    jcyglseeAccount,
    ocalityPostAction,
    jcygladdAccount,
 } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            accountManageKey:null,
            form: this.$form.createForm(this, { name: 'accountManageFrom' }),
            visible:false,
            isView:false,
            fromState:{},
            lbList:[],
            rules:{
                fsfzh: [{
                    required: true,
                    message: '请输入身份证号',
                    // trigger: 'blur',
                },{
                    pattern: validator.isIdCard.reg,
                    message: '请输入正确的身份证号',
                    // trigger: 'blur',
                }],
                phone: [{
                    required: true,
                    message: '请输入手机号码',
                    // trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号码',
                    // trigger: 'blur',
                }],
                realname:[{
                    required: true,
                    message: '请输入姓名',
                    // trigger: 'blur',
                }],
                category:[{
                    type:'array',
                    required: true,
                    message: '请选择审评类型',
                }],
                fssk1:[{ required: true, message: '请选择所属库', }],
                fssk2:[{ required: true, message: '请选择所属库', }],
                fssk3:[{ required: true, message: '请选择所属库', }],
                fssk4:[{ required: true, message: '请选择所属库', }],
                fssk5:[{ required: true, message: '请选择所属库', }],
                fssk6:[{ required: true, message: '请选择所属库', }],
                fssk7:[{ required: true, message: '请选择所属库', }],
                fssk8:[{ required: true, message: '请选择所属库', }],
                fssk9:[{ required: true, message: '请选择所属库', }],
                fssk10:[{ required: true, message: '请选择所属库', }],
                fssk11:[{ required: true, message: '请选择所属库', }],
                fssk12:[{ required: true, message: '请选择所属库', }],
                fssk13:[{ required: true, message: '请选择所属库', }],
                fssk14:[{ required: true, message: '请选择所属库', }],
                fssk15:[{ required: true, message: '请选择所属库', }],
                fssk16:[{ required: true, message: '请选择所属库', }],
                fssk17:[{ required: true, message: '请选择所属库', }],
                fssk18:[{ required: true, message: '请选择所属库', }],
                fssk19:[{ required: true, message: '请选择所属库', }],
                fssk20:[{ required: true, message: '请选择所属库', }],
                fssk21:[{ required: true, message: '请选择所属库', }],
                fssk22:[{ required: true, message: '请选择所属库', }],
                fssk23:[{ required: true, message: '请选择所属库', }],
                fssk24:[{ required: true, message: '请选择所属库', }],
                fssk25:[{ required: true, message: '请选择所属库', }],
                fssk26:[{ required: true, message: '请选择所属库', }],
                fssk27:[{ required: true, message: '请选择所属库', }],
                
            },
            category:[],
            sskList:[],
            fsskData:{},
            categoryKey:null,
            radioGroupKey:null,
            yuanlbList:[],
            checkboxShow:true,
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,isView){
            this.checkboxShow = false
            let data = {}
            if(row.id){
                this.fromState.id = row.id
                data = {id:row.id}
            }else{
                data = {}
            }
            jcyglseeAccount(data).then(res=>{
                if(res.code == 200){
                    this.lbList = JSON.parse(JSON.stringify(res.result.lbList))
                    this.yuanlbList = JSON.parse(JSON.stringify(res.result.lbList))
                    this.fromState = res.result.user
                    this.category = []
                    this.lbList.forEach(item=>{
                        if(item.fxzzt == '1'){
                            let arr = this.category.filter(i=>i == item.lbmc)
                            if(!arr.length){
                                this.category.push(item.lbmc)
                            }
                        }
                    })
                    this.accountManageKey = Date.now()
                    this.radioGroupKey = Date.now()
                    this.categoryKey = Date.now()
                    
                }
                this.checkboxShow = true
            })
            this.isView = isView
            ocalityPostAction({dictName:'核查员所属库'}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.sskList = res.result
                }
            })
        },
        categoryChange(val){
            //console.log(val)
            if(val.length){
                this.lbList.forEach((item,index)=>{
                    if(val.indexOf(item.lbmc) !== -1){
                        this.lbList[index].fxzzt = '1'
                        this.categoryKey = Date.now()
                    }else{
                        this.lbList[index].fxzzt = '0'
                        this.categoryKey = Date.now()
                    }
                })
            }else{
                this.lbList = JSON.parse(JSON.stringify(this.yuanlbList))
                this.categoryKey = Date.now()
            }
            //console.log(this.lbList)
            //console.log(this.yuanlbList)
        },
        handleOk(val){
            let errData = []
            if(this.fromState.id){
                errData = ['category','fssk1','fssk2','fssk3','fssk4','fssk5','fssk6']
            }else{
                errData = ['fsfzh', 'phone','realname','category','fssk1','fssk2','fssk3','fssk4','fssk5','fssk6']
            }
            this.form.validateFields(errData, { force: true }, (err, values) => {
                if(!err){
                    jcygladdAccount({user:this.fromState,lbList:this.lbList}).then(res=>{
                        if(res.code == 200){
                            //console.log('保存后得到什么',res)
                            this.visible = val
                            this.fromState.id = res.result
                            this.getData(this.fromState,false)//查看不会进到这里
                            this.$message.success(res.message)
                            this.$emit('successChange')
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })

        },
    }
}
</script>
<style lang="less">
.account-manage-form{
    .flex-p-t{

    }
    .ant-form-item-label{
        width: 100px;
    }
    .flex-no-h{
        display: flex;
        flex-direction: column;
        
    }
    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
        border-color: #2F54EB;
    }
    .ant-radio-disabled .ant-radio-inner:after{
        background-color: #2F54EB;
    }
}

</style>